<template>
  <div @click="searchGo">
    <div class="bg-ff padding-20">
      <div class="_search flex align-center bg-f5 padding-l20">
        <van-icon class="rem-30px margin-r24 c-99" name="search" />
        <input
          class="rem-28px flex-grow"
          type="text"
          v-model="value"
          @input="empty"
          :disabled="disabled"
          @keydown.enter="searchConfirm"
          placeholder="搜索"
        />
        <van-icon v-if="close" class="c-99 padding-r20" name="close" @click="closeChange" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 默认value
    searchValue: {
      type: String
    },
    // 禁止点击
    disabled:{
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      value: this.searchValue || '',
      close: false,
    }
  },
  methods: {
    // 取消搜索框内容
    empty() {
      if (this.value.length > 1) {
        this.close = true;
      }
    },
    closeChange() {
      this.value = "";
      this.close = false;
    },
    searchConfirm(){
      this.$emit('confirm', this.value)
    },
    searchGo(){
      this.$emit('confirms', '')
    }
  }
};
</script>

<style scoped>
._search {
  height: 0.64rem;
  line-height: 0.64rem;
}
._search input {
  background: #f5f5f5;
}
</style>